/* eslint-disable no-unused-vars */
import React, { useCallback } from 'react';
import { Card } from 'antd';
import { observer } from 'mobx-react';
import { AxiosInstance } from 'axios';
import { BlogInfo } from "../../store/blog";
import clientAxiosInstance from "../../request";
import { useStores } from "../../store/store";
import '../CSS/LabelList.less';

interface LabelProps{
    info: LabelCount;
    label: string;
    setLabel: (label: string, axiosInstance: AxiosInstance) => void;
}

function Label(props: LabelProps) {
    const { label, setLabel, info } = props;
    const { _id, count } = info;
    const handleClick = useCallback(() => {
        if (_id !== label) {
            setLabel(_id, clientAxiosInstance);
        }
    }, [label]);
    return (
        <p
            onClick={handleClick}
            className={label !== _id ? "label-wrapper" : "label-wrapper label-active"}
        >
            <span className="label-name">{_id}</span>
            <span className="label-count">{count}</span>
        </p>
    );
}

function LabelList() {
    const { labelList, label, setLabel, TOTAL } = useStores('blogList') as BlogInfo;
    console.log(labelList);
    const handleFirstClick = useCallback(() => {
        if (label !== '') {
            setLabel('', clientAxiosInstance);
        }
    }, [label]);
    return (
        <div className="site-card-border-less-wrapper">
            <Card title="博客分类" bordered={false}>
                <p
                    onClick={handleFirstClick}
                    className={label !== '' ? "label-wrapper" : "label-wrapper label-active"}
                >
                    <span className="label-name">全部</span>
                    <span className="label-count">{TOTAL}</span>
                </p>
                {
                    labelList.map((labelInfo) => (
                        <Label
                            key={labelInfo._id}
                            info={labelInfo}
                            label={label}
                            setLabel={setLabel}
                        />
                    ))
                }
            </Card>
        </div>
    );
}

export default observer(LabelList);
